@extends('home.auth.base')
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.form_register.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    form_login: {
                        type : "{{ $three['type'] }}",
                        three_id : "{{ $three['idstr'] }}",
                        username: '',
                        password: '',
                        _token:"{{csrf_token()}}"
                    },
                    form_register: {
                        type : "{{ $three['type'] }}",
                        name : "{{ $three['name'] }}",
                        avatar : "{{ urlencode($three['avatar']) }}",
                        three_id : "{{ $three['idstr'] }}",
                        username: '',
                        code: '',
                        password: '',
                        password_confirmation: '',
                        email: "{{ $three['email'] }}",
                        _token:"{{csrf_token()}}"
                    },
                    rules: {
                        username: [{ required: true, message: '请填写手机号', trigger: 'blur'}],
                        code: [{ required: true, message: '请填写验证码', trigger: 'blur'}],
                        password: [{ required: true, message: '请填写密码', trigger: 'blur'},{ min: 6, message: '密码的长度不能小于6位', trigger: 'blur' }],
                        password_confirmation: [{ validator: validatePass, trigger: 'blur' }],
                        email: [{ required: true, message: '请填写邮箱', trigger: 'blur'},{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }],
                    },
                    smsTime: 60,
                    smsSend: 1,
                    smsMsg: '获取短信验证码',
                }
            },
            methods: {
                register() {
                    let that = this;
                    this.$refs['form_register'].validate((valid) => {
                        if (valid) {
                            $.post("{{ route('home.auth.register') }}",this.form_register,function(res){
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        message: '注册成功，页面即将跳转......',
                                        type: 'success'
                                    });
                                    setTimeout(function(){
                                        window.location.href = res.data;
                                    }, 1000);
                                }
                            });
                        }
                    });
                },
                send(){
                    let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                    if(!this.form_register.username){
                        this.$refs.form_register.fields[0].error = "请填写手机号";return false;
                    }
                    if(!reg.test(this.form_register.username)){
                        this.$refs.form_register.fields[0].error = "请输入有效的手机号码";return false;
                    }
                    if(this.smsSend){
                        let that = this;
                        $.post("{{ route('home.auth.sms') }}",{mobile:this.form_register.username,_token:"{{csrf_token()}}",},function(res){
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.smsSend = 0;
                                let timer = setInterval(function(){
                                    that.smsMsg = "<em style='font-style: normal;color: red'>"+that.smsTime + "</em> 秒后重新获取";
                                    that.smsTime--;
                                    if (that.smsTime < 1) {
                                        that.smsTime = 60;
                                        that.smsSend = 1;
                                        that.smsMsg = "获取短信验证码";
                                        clearInterval(timer);
                                    }
                                }, 1000);
                            }
                        });
                    }
                },
                login() {
                    let that = this;
                    this.$refs['form_login'].validate((valid) => {
                        if (valid) {
                            $.post("{{ route('home.auth.login') }}",this.form_login,function(res){
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        message: '登录成功，页面即将跳转......',
                                        type: 'success'
                                    });
                                    setTimeout(function(){
                                        window.location.href = res.data;
                                    }, 1000);
                                }
                            });
                        }
                    });
                },
            }
        });
    </script>
@endsection
@section('content')
    <div class="main auth binding">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="binding-form" id="app" style="height: 780px;display: flex;padding: 15px;margin-top: 20px" v-cloak>
                        <div class="auth-binding-left">
                            <div class="ui message red">您正在使用第三方账号 <span>{{ $three['name'] }}</span> 绑定链鸽</div>
                            <p style="font-weight: bold;line-height: 35px;text-transform: none;color: #333;font-size: 15px">您好，请完善以下信息后才能新建账号</p>
                            <div class="ui message info">
                                <span style="margin-right: 15px">提示: </span>  此处会新建一个链鸽帐号，如果你已有帐号，可以尝试右边的绑定已有链鸽帐号。
                            </div>
                            <el-form :model="form_register" :rules="rules" ref="form_register" status-icon label-position="top" class="binding-form">
                                <el-form-item label="手机号：" prop="username">
                                    <el-input  v-model="form_register.username" clearable placeholder="请填写手机号" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="验证码：" prop="code">
                                    <el-input placeholder="请填写验证码" clearable v-model="form_register.code">
                                        <template slot="append">
                                            <span @click="send()" style="width: 100px;display: inline-block;text-align: center;cursor: pointer" v-html="smsMsg"></span>
                                        </template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="密码：" prop="password">
                                    <el-input type="password" clearable v-model="form_register.password" placeholder="请填写密码" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item required label="确认密码：" prop="password_confirmation">
                                    <el-input type="password" clearable v-model="form_register.password_confirmation" placeholder="请再次输入密码" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱：" prop="email">
                                    <el-input v-model="form_register.email" clearable placeholder="请填写邮箱" auto-complete="off"></el-input>
                                </el-form-item>
                                <div class="form-submit">
                                    <el-button type="primary" @click="register()">注册新账号</el-button>
                                </div>
                            </el-form>
                        </div>
                        <div class="auth-binding-middle"><span>OR</span></div>
                        <div class="auth-binding-right">
                            <p style="font-weight: bold;line-height: 35px;text-transform: none;color: #333;font-size: 15px">绑定已有链鸽帐号</p>
                            <div  class="ui message info">
                                <span>提示： </span> 绑定已有的链鸽帐号后，即可以在登录页面使用第三方登录方式登录此链鸽帐号。
                            </div>
                            <el-form :model="form_login" ref="form_login" label-position="top" class="binding-form">
                                <el-form-item label="手机号：" :rules="[{ required: true, message: '请填写手机号', trigger: 'blur'}]" prop="username">
                                    <el-input v-model="form_login.username" placeholder="请填写手机号" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="密码：" :rules="[{ required: true, message: '请填写登录密码', trigger: 'blur'}]" prop="password">
                                    <el-input type="password" v-model="form_login.password" placeholder="请填写登录密码" auto-complete="off"></el-input>
                                </el-form-item>
                                <div class="form-submit">
                                    <el-button type="primary" @click="login()">绑定该账号</el-button>
                                </div>
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

